<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/userCard.css">
    <script src="../assets/axios/axios.js"></script>
    <script>
        function loadUserList() {
            // ajax 的异步请求，并根据服务器响应结果，完成数据获取
            // axios 的基本使用
            // 1、axios的文件引入，会在全局环境中增加一个功能方法 axios
            // console.log(axios)
            // 2、axios(options) 方法通过接收 配置参数 options={} 描述请求的相关要求
            //          axios 是一个已经被封装功能的JS方法，该方法的合理参数应该是工具定义，
            //                参数类型为对象时使用的是 options Api (选项配置规则)，
            //                options Api 通过参数的配置 描述不同的执行规则逻辑
            // 3、axios通过promise规则封装了异步请求的响应结果状态，通过返回promise对象的 两个状态分别描述请求成功或者请求失败
            //          + fulfilled 状态表示请求成功
            //          + rejected 状态表示请求失败
            // 4、axios将请求成功的结果以封装对象的方式作为参数提供给 resolve 函数,将请求失败的结果以封装对象的方法提供给 reject 函数
            let options = {
                // url 是用于请求的服务器 URL
                url: 'http://127.0.0.1:3000/api/users',
            }
            let p = axios(options);
            console.log(p);
            console.log(p);
            p.then(function (response) {
                // axios 请求成功后提供的数据是axios进行二次组装数据对象     
                /*
                该数据对象包括以下内容
                {
                    // `data` 由服务器提供的响应
                    data: {},
                    // `status` 来自服务器响应的 HTTP 状态码
                    status: 200,
                    // `statusText` 来自服务器响应的 HTTP 状态信息
                    statusText: 'OK',
                    // `headers` 是服务器响应头
                    // 所有的 header 名称都是小写，而且可以使用方括号语法访问
                    // 例如: `response.headers['content-type']`
                    headers: {},
                    // `config` 是 `axios` 请求的配置信息
                    config: {},
                    // `request` 是生成此响应的请求
                    // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
                    // 在浏览器中则是 XMLHttpRequest 实例
                    request: {}
                }
                */
                console.log("请求成功", response);
                console.log("服务器数据加载", response.data);
                // 页面的渲染操作
                let temp = "";
                response.data.users.forEach(function (u) {
                    temp += `
                        <div class="user-card">
                            <div class="head">
                                <img src="${u.img}p" alt="" srcset="">
                            </div>
                            <div class="info">
                                <div class="row">
                                    <span>编号</span>
                                    <span>${u.No}</span>
                                </div>
                                <div class="row">
                                    <span>姓名</span>
                                    <span>${u.name}</span>
                                </div>
                                <div class="row">
                                    <span>性别</span>
                                    <span>${u.sex}</span>
                                </div>
                                <div class="row">
                                    <span>手机号码</span>
                                    <span>${u.tel}</span>
                                </div>
                            </div>
                        </div>
                    `
                });
                let listBox = document.querySelector(".user-list");
                listBox.innerHTML = temp
            }, function (error) {
                console.log("请求失败", error);
                alert("请求失败")
            })
            console.log("code end")

        }


    </script>
</head>

<body>
    <input type="button" value="loadUserList" onclick="loadUserList()">
    <hr>
    <div class="user-list"></div>
</body>

</html>